<template>

    <el-container>
        <el-header style="background: #fff; padding: 0; ">
            <div class="nav-api-header">
                <div style="padding-top: 10px; margin-left: 10px">
                    <el-button
                        :disabled="addAPIFlag"
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus"
                        @click="dialogVisible = true">
                        新建分组
                    </el-button>

                    <el-dialog
                        title="新建分组"
                        :visible.sync="dialogVisible"
                        width="30%"
                        align="center">
                        <el-form
                            :model="nodeForm"
                            :rules="rules"
                            ref="nodeForm"
                            label-width="100px"
                            class="project">
                            <el-form-item label="节点名称" prop="name">
                                <el-input v-model="nodeForm.name"></el-input>
                            </el-form-item>
                        </el-form>

                        <el-radio-group v-model="radio" size="small">
                            <el-radio-button label="根节点"></el-radio-button>
                            <el-radio-button label="子节点"></el-radio-button>
                        </el-radio-group>

                        <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="handleConfirm('nodeForm')">确 定</el-button>
                      </span>
                    </el-dialog>

                    <el-button
                        :disabled="currentNode === '' || addAPIFlag "
                        type="danger"
                        size="small"
                        icon="el-icon-delete"
                        @click="deleteNode">
                        删除分组
                    </el-button>


                    <el-button
                        :disabled="currentNode === '' || addAPIFlag "
                        type="info"
                        size="small"
                        icon="el-icon-refresh-right"
                        @click="renameNode"
                        style="margin-left: 0px">
                        重命名
                    </el-button>


                    <el-button
                        :disabled="currentNode === '' || addAPIFlag "
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus-outline"
                        @click="initResponse = true"
                        style="margin-left: 0px"
                    >添加接口
                    </el-button>

                    <el-button
                        :disabled="currentNode === '' || addAPIFlag "
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus-outline"
                        @click="uploadFileDialog = true"
                        style="margin-left: 0px">
                        批量导入接口
                    </el-button>

                    <el-dialog
                        title="导入接口"
                        :visible.sync="uploadFileDialog"
                        :before-close="uploadFileDialogDialogClose"
                        width="30%"
                        align="center">
                        <div style="margin-top: -20px;">
                            <el-radio v-model="uploadType" label="1" border size="medium">har文件</el-radio>
                            <el-radio style="margin-left: -20px;" v-model="uploadType" label="2" border size="medium">postman文件</el-radio>
                            <el-radio style="margin-left: -20px;" v-model="uploadType" label="3" border size="medium">谷歌插件录制</el-radio>
                        </div>
                        <el-upload
                            v-if="uploadType!=3"
                            class="upload-demo"
                            style="margin-top: 10px;"
                            drag
                            ref="upload"
                            :action="uploadUrl()"
                            :file-list="fileList"
                            :auto-upload="false"
                            :on-success="on_success"
                            :data="uploadData"
                            :limit=1
                            :headers="uploadheader"
                            :on-exceed="on_exceed"
                            :before-upload="beforeFileUploadCheck">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div slot="tip" style="color:red;font-size:14px" v-if='limitTip' class="el-upload__tip">已存在上传文件，请删除再选择</div>
                        </el-upload>
                        <span slot="footer" class="dialog-footer" v-if="uploadType!=3">
                        <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                      </span>
                    </el-dialog>

                    <el-button
                        v-if="!addAPIFlag"
                        style="margin-left: 20px"
                        type="primary"
                        icon="el-icon-caret-right"
                        circle
                        size="mini"
                        @click="run = !run"
                        title="批量运行">
                    </el-button>

                    <el-button
                        v-if="!addAPIFlag"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        size="mini"
                        @click="del = !del"
                        title="批量删除">
                    </el-button>
                    &nbsp环境:
                    <el-select
                        placeholder="请选择"
                        size="small"
                        v-model="currentHost"
                        style="width: 150px">
                        <el-option
                            v-for="item in hostOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                    &nbsp配置:
                    <el-select
                        placeholder="请选择"
                        size="small"
                        style="width: 300px"
                        v-model="currentConfig">
                        <el-option
                            v-for="item in configOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>

                    <el-button
                        :disabled="!addAPIFlag"
                        type="text"
                        style="position: absolute; right: 30px;"
                        @click="addAPIFlag=false">
                        返回列表
                    </el-button>
                </div>
            </div>
        </el-header>

        <el-container>
            <el-aside style="margin-top: 10px;" v-show="!addAPIFlag">
                <div class="nav-api-side">
                    <div class="api-tree">
                        <el-input
                            placeholder="输入关键字进行过滤"
                            v-model="filterText"
                            v-if="dataTree.length!==0"
                            size="medium"
                            clearable
                            prefix-icon="el-icon-search">
                        </el-input>
                        <el-tree
                            @node-click="handleNodeClick"
                            :data="dataTree"
                            node-key="id"
                            :default-expand-all="false"
                            :expand-on-click-node="false"
                            draggable
                            highlight-current
                            :filter-node-method="filterNode"
                            ref="tree2"
                            @node-drag-end="handleDragEnd">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span><i class="iconfont" v-html="expand"></i>&nbsp;&nbsp;{{ node.label }}</span>
                            </span>
                        </el-tree>
                    </div>
                </div>

            </el-aside>

            <el-main style="padding: 0;">
                <api-body
                    v-show="addAPIFlag"
                    :nodeId="currentNode.id"
                    :project="$route.params.id"
                    :response="response"
                    v-on:addSuccess="handleAddSuccess"
                    :config="currentConfig"
                    :host="currentHost">
                </api-body>

                <api-list
                    v-show="!addAPIFlag"
                    v-on:api="handleAPI"
                    :node="currentNode !== '' ? currentNode.id : '' "
                    :project="$route.params.id"
                    :config="currentConfig"
                    :host="currentHost"
                    :del="del"
                    :back="back"
                    :run="run"
                    :upload_watch="upload_watch">
                </api-list>

            </el-main>
        </el-container>
    </el-container>

</template>

<script>
    import ApiBody from './components/ApiBody'
    import ApiList from './components/ApiList'
    import store from '../../../store/state'

    export default {
        watch: {
            filterText(val) {
                this.$refs.tree2.filter(val);
            },

            uploadType(val) {
                if (val == 3) {
                    this.uploadFileDialog = false;
                    this.uploadType = "1";
                    const {href} = this.$router.resolve({
                        name: "ChromeReadme",
                    });
                    window.open(href, '_blank');
                }

            }
        },
        components: {
            ApiBody,
            ApiList
        },

        computed: {
            initResponse: {
                get() {
                    return this.addAPIFlag;
                },
                set(value) {
                    this.addAPIFlag = value;
                    this.response = {
                        id: '',
                        body: {
                            name: '',
                            times: 1,
                            url: '',
                            method: 'POST',
                            header: [{
                                key: "",
                                value: "",
                                desc: ""
                            }],
                            request: {
                                data: [{
                                    key: "",
                                    value: "",
                                    desc: "",
                                    type: 1
                                }],
                                params: [{
                                    key: "",
                                    value: "",
                                    desc: "",
                                    type: 1
                                }],
                                json_data: ''
                            },
                            validate: [{
                                expect: "200",
                                actual: "status_code",
                                comparator: "equals",
                                type: 2
                            }],
                            variables: [{
                                key: "",
                                value: "",
                                desc: "",
                                type: 1
                            }],
                            extract: [{
                                key: "",
                                value: "",
                                desc: ""
                            }],
                            hooks: [{
                                setup: "",
                                teardown: ""
                            }]
                        }
                    };
                }
            },
        },
        data() {
            return {
                aid: "",
                configOptions: [],
                hostOptions: [],
                currentConfig: '请选择',
                currentHost: '请选择',
                back: false,
                del: false,
                run: false,
                response: {
                    id: '',
                    body: {
                        name: '',
                        times: 1,
                        url: '',
                        method: 'POST',
                        header: [{
                            key: "",
                            value: "",
                            desc: ""
                        }],
                        request: {
                            data: [{
                                key: "",
                                value: "",
                                desc: "",
                                type: 1
                            }],
                            params: [{
                                key: "",
                                value: "",
                                desc: "",
                                type: 1
                            }],
                            json_data: ''
                        },
                        validate: [{
                            expect: "",
                            actual: "",
                            comparator: "equals",
                            type: 1
                        }],
                        variables: [{
                            key: "",
                            value: "",
                            desc: "",
                            type: 1
                        }],
                        extract: [{
                            key: "",
                            value: "",
                            desc: ""
                        }],
                        hooks: [{
                            setup: "",
                            teardown: ""
                        }]
                    }
                },
                nodeForm: {
                    name: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入节点名称', trigger: 'blur'},
                        {min: 1, max: 50, message: '最多不超过50个字符', trigger: 'blur'}
                    ]
                },
                radio: '根节点',
                addAPIFlag: false,
                treeId: '',
                maxId: '',
                dialogVisible: false,
                currentNode: '',
                data: '',
                filterText: '',
                expand: '&#xe65f;',
                dataTree: [],
                uploadFileDialog: false,
                fileList: [],
                limitTip: false,
                upload_watch: false,
                uploadData: {"nodeId": "", "project": "", "uploadType": ""},
                uploadType: "1",
                uploadheader: {
                    Authorization: `JWT ${store.token}`
                },
            }
        },
        methods: {
            handleDragEnd() {
                this.updateTree(false);
            },
            handleAddSuccess() {
                this.back = !this.back;
                this.addAPIFlag = false;
            },

            handleAPI(response) {
                this.addAPIFlag = true;
                this.response = response;
            },

            getTree() {
                this.$api.getTree(this.$route.params.id, {params: {type: 1}}).then(resp => {
                    this.dataTree = resp['tree'];
                    this.treeId = resp['id'];
                    this.maxId = resp['max'];
                })
            },
            getConfig() {
                this.$api.getAllConfig(this.$route.params.id).then(resp => {
                    this.configOptions = resp;
                    this.configOptions.push({
                        name: '请选择'
                    })
                })
            },

            getHost() {
                this.$api.hostList({params: {project: this.$route.params.id}}).then(resp => {
                    this.hostOptions = resp.data["results"];
                    this.hostOptions.push({
                        name: '请选择'
                    })
                })
            },

            updateTree(mode) {
                this.$api.updateTree(this.treeId, {
                    body: this.dataTree,
                    node: this.currentNode.id,
                    mode: mode,
                    type: 1
                }).then(resp => {
                    if (resp['success']) {
                        this.dataTree = resp['tree'];
                        this.maxId = resp['max'];
                        this.$notify.success('更新成功')
                    } else {
                        this.$message.error(resp['msg']);
                    }
                })
            },

            deleteNode() {
                this.$confirm('此操作将永久删除该节点下所有接口, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (this.currentNode === '') {
                        this.$notify.info('请选择一个节点');
                    } else {
                        if (this.currentNode.children.length !== 0) {
                            this.$notify.error('此节点有子节点，不可删除！');
                        } else {
                            this.remove(this.currentNode, this.data);
                            this.updateTree(true);
                        }
                    }
                })
            },

            renameNode() {
                this.$prompt('请输入节点名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '节点名称不能为空'
                }).then(({value}) => {
                    const parent = this.data.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === this.currentNode.id);
                    children[index]["label"] = value
                    this.updateTree(false);
                });
            },

            handleConfirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.append(this.currentNode);
                        this.updateTree(false);
                        this.dialogVisible = false;
                    }
                });
            },

            handleNodeClick(node, data) {
                this.addAPIFlag = false;
                this.currentNode = node;
                this.data = data;
            },

            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },

            remove(data, node) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },

            append(data) {
                const newChild = {id: ++this.maxId, label: this.nodeForm.name, children: []};
                if (data === '' || this.dataTree.length === 0 || this.radio === '根节点') {
                    this.dataTree.push(newChild);
                    return
                }
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);
            },

            uploadUrl() {
                // 文件上传地址,uploadType:文件类型，1:har,2:json
                if (this.uploadType == 1) {
                    return this.$api.uploadApiHar()
                }
                if (this.uploadType == 2) {
                    return "http://192.168.197.103:8300/rfhouse/uploadFile"
                }
            },

            submitUpload() {
                this.uploadData.nodeId = this.currentNode.id
                this.uploadData.project = this.$route.params.id
                this.uploadData.uploadType = this.uploadType
                this.$refs.upload.submit();
            },

            beforeFileUploadCheck(file) {
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                if (this.uploadType == 1) {
                    const extension = testmsg === 'har'
                    if (!extension) {
                        this.$message({message: '上传文件只能是har格式!', type: 'warning'})
                        return false
                    }
                    return extension
                }

                if (this.uploadType == 2) {
                    const extension = testmsg === 'json'
                    if (!extension) {
                        this.$message({message: '上传文件只能是json格式!', type: 'warning'})
                        return false
                    }
                    return extension
                }

            },

            on_exceed() {
                this.limitTip = true
            },

            on_success(response, file, fileList) {
                this.fileList = []
                this.limitTip = false
                if (response.code == 1001 && this.uploadType == 1) {
                    this.uploadFileDialog = false
                    this.upload_watch = !this.upload_watch
                    console.log("response", response)

                }
                else if (response.code == 1001 && this.uploadType == 2) {
                    // 上传的是postman文件，解析成功跳转到录入页面
                    this.uploadFileDialog = false
                    this.$router.push({
                        name: 'RecordChromeApi',
                        query: {
                            datakey: response.data,
                            projectid: this.$route.params.id,
                            node: this.currentNode.id
                        }
                    })

                }
                else {
                    this.$notify.error(response.msg)
                }

            },

            uploadFileDialogDialogClose() {
                this.fileList = []
                this.limitTip = false
                this.uploadFileDialog = false
            },
        },
        name: "RecordApi",
        mounted() {
            this.getTree();
            this.getConfig();
            this.getHost();
            this.aid = this.$route.query['aid'];
        }
    }
</script>

<style scoped>


</style>
